<template>
  <view class="familyCircleDetails allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack title="家庭圈" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight">
      <template>
        <view class="familyCircleDetails_headerTitle">
          <text class="familyCircleDetails_headerTitle_text">张三的家庭</text>
        </view>
      </template>
    </header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <family-circle class="familyCircle" id="familyCircle" ref="familyCircle" v-for="(item,index) in familyCircleDetail" :key="index" :info="item" ></family-circle>
    <bottom-button  title="发布" class="bottomButton z-1 mt-23" :is-fixed="bottomFlag" @elementClick="$nav.navigateTo('/pages/familyCircleDetails/familyCircleRelease')"></bottom-button>
    <view style="height: 150rpx"></view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import FamilyCircle from "../family/components/familyCircle.vue";
import BottomButton from "../../components/shiqinComponents/shiqinButton/bottomButton.vue";

export default {
  components: {BottomButton, FamilyCircle, HeaderTitle},
  data() {
    return {
      // 头部高度
      headerHeight: 0,
      familyCircleDetail: [
        {
          // 头像
          avatar: '',
          // 名称
          name: '张三',
          // 对方的称呼
          call: '弟弟',
          // 发布的文案
          copywriting: '在未来的城市里今天下雨了，在未来的城市里天下雨了在未来的城市里今天下雨了在未来的市里今天下雨了。',
          // 图片列表
          imagesList: [
            'https://imgs.699pic.com/images/507/738/651.jpg!list1x.v2',
            'https://imgs.699pic.com/images/507/738/651.jpg!list1x.v2',
            'https://imgs.699pic.com/images/507/738/651.jpg!list1x.v2',
            'https://imgs.699pic.com/images/507/738/651.jpg!list1x.v2',
            'https://imgs.699pic.com/images/507/738/651.jpg!list1x.v2',
            'https://imgs.699pic.com/images/507/738/651.jpg!list1x.v2',
            'https://imgs.699pic.com/images/507/738/651.jpg!list1x.v2',
            'https://imgs.699pic.com/images/507/738/651.jpg!list1x.v2',
            'https://imgs.699pic.com/images/507/738/651.jpg!list1x.v2'
          ],
          // 发布时间
          released: '3分钟前',
          // 是否点赞
          isThumbsUp: true,
          // 点赞数量
          likesNumber: 20,
          // 评论数量
          reviewsNumber: 30
        }
      ],
      // 浮窗按钮的配置
      bottomFlag: false,
      systemInfo: {}
    };
  },
  onReady() {
    this.$nextTick(() => {
      this.systemInfo = uni.getSystemInfoSync()
      this.$refs.headerTitle.getPageHeight()
      this.getBottomButton()
    })
  },
  methods: {
    getBottomButton() {
      const query = uni.createSelectorQuery().in(this)
      query.selectAll('.familyCircle').boundingClientRect(data => {
        let num = 0
        data.forEach(item => {
          num = item.top + item.height + num
        })
        const rpx = this.systemInfo.windowWidth / 750
        console.log(num)
        this.bottomFlag = (this.headerHeight +  num) > this.systemInfo.windowHeight - (200 * rpx)
      }).exec()
    },
    getPageHeight(number) {
      this.headerHeight = number
    }
  },
}
</script>

<style lang="scss">
.familyCircleDetails {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .familyCircleDetails_headerTitle {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translateX(-50%);

    .familyCircleDetails_headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #A0A0A0;
    }
  }
  .familyCircleDetails_publish {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;
    position: fixed;
    bottom: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    .familyCircleDetails_publish_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

}
</style>
